<template>
  <main>
    <div class="container">
      <div class="a">
        <div
          v-for="(item, index) in backgrounds"
          :key="index"
          :class="item.class"
          :style="{
            '--i': item.i,
            '--s': item.s,
            'background-image': `url(${item.bgImage})`,
          }"
        ></div>
      </div>
    </div>
  </main>
</template><script setup>
import { ref } from "vue";
const backgrounds = ref([
  {
    class: "b",
    i: 2,
    bgImage: new URL("@/assets/images/thanks.png", import.meta.url).href,
  },
  {
    class: "c",
    i: 4,
    s: 1,
    bgImage: new URL("@/assets/images/计算机科学.jpg", import.meta.url).href,
  },
  {
    class: "d",
    i: 3,
    s: 2,
    bgImage: new URL("@/assets/images/abstract-english.png", import.meta.url)
      .href,
  },
  {
    class: "e",
    i: 2,
    s: 3,
    bgImage: new URL("@/assets/images/references.png", import.meta.url).href,
  },
  {
    class: "f",
    i: 1,
    s: 4,
    bgImage: new URL("@/assets/images/abstract.png", import.meta.url).href,
  },
]);
</script>
<style scoped>
main {
  width: 100%;
  min-height: 100vh;
  overflow: hidden;
  background-image: linear-gradient(120deg, #89f7fe 0%, #66a6ff 100%);
  padding: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.container {
  display: flex;
  justify-content: center;
}
.a {
  width: 450px;
  height: 420px;
  position: absolute;
  top: 150px;
  transform-style: preserve-3d;
  perspective: 1000px;
  transition: 0.8s;
}
.b,
.c,
.d,
.e,
.f {
  width: 450px;
  height: 540px;
  position: absolute;
  /* 这是翻页的起点，在左边 */
  transform-origin: left;
  background-size: cover;
  /* 这是翻页时元素之间的延迟 */
  transition: calc(var(--i) * 0.5s);
  /* 这是翻页时元素的层级 */
  z-index: calc(var(--i) * 99);
}
.b,
.c {
  border: solid 20px #576574;
  border-left: none;
  top: -20px;
  border-radius: 0 20px 20px 0;
}
.a:hover .b {
  border-left: #576574 20px solid;
}
.a:hover .c,
.a:hover .d,
.a:hover .e,
.a:hover .f {
  transform: rotateY(-180deg);
  /* 此时翻页的顺序会倒过来，所以我们的延迟和层级也要反一下 */
  transition: calc(var(--s) * 0.4s);
  z-index: calc(var(--s) * -99);
}
.a:hover {
  transform: translateX(100px);
}
</style>